import { ref } from "vue";
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import { isString, isArray } from '../utils/is'

type IFileUrl = string | string[]
type IFileType = 'docx' | 'xlsx' | 'pdf' | 'img'

export function useFilePreview() {
  const fileUrl = ref<IFileUrl>('')
  const fileType = ref<IFileType>()
  const showFilePreview = ref(false)
  const handlePreView = (type: IFileType, url: IFileUrl) => {

    // 检测文件类型是否正确
    if (!['docx', 'xlsx', 'pdf', 'img'].includes(type)) {
      ElMessage.error('文件类型检查失败')
      return
    }

    // 检测是否缺少必要参数
    if (!type || !url) {
      ElMessage.error(
        `${!type ? '缺少必要参数 fileType' : ''}${!url ? '缺少必要参数 fileUrl' : ''}`
      )
        return
    }

    // 检测 url 类型是否正确
    if (type === 'img') { 
      if (!isString(url) && !isArray(url)) {
        ElMessage.error('fileUrl 类型检查失败，应为 string | string[]')
        return
      }
    } else {
      if (!isString(url)) {
        ElMessage.error('fileUrl 类型检查失败，应为 string | ArrayBuffer | Blob')
        return
      }
    }
    
    showFilePreview.value = true
    fileType.value = type
    fileUrl.value = url
  }
  return {
    fileUrl,
    fileType,
    showFilePreview,
    handlePreView,
  }
}
